<template>
	<view class="container">
		<image class="bg" src="/static/3001.png" />
		<view class="person-box display-flex" v-if="userInfo&&userInfo.userId">
			<image class="img" src="/static/3002.png" />
			<view class="info-box">
				<view class="name">
					Hi~ {{userInfo.name}}
				</view>
				<view class="tel" v-if="userInfo.phone">
					{{userInfo.phone}}
				</view>
			</view>
			<!-- <image class="seting" src="/static/3003.png" /> -->
		</view>
		<view class="person-box display-flex" v-else>
			<image class="img" src="/static/3002.png" />
			<view class="info-box" @click="onPerson()">
				<view class="name">
					Hi~ 欢迎您
				</view>
				<view class="tel">
					请登录
				</view>
			</view>
			<!-- <image class="seting" src="/static/3003.png" @click="onPerson()" /> -->
		</view>
		<view class="card-box display-flex" v-if="userInfo&&userInfo.userId">
			<image class="bg-item" src="/static/3004.png" />
			<view class="info-box">
				<view class="name">我的账户</view>
				<view class="value">
					<view class="amount">{{userInfo.amount?parseFloat(userInfo.amount/100).toFixed(2):'0.00'}}<text
							class="unit"> 元</text></view>
					<view class="">{{userInfo.balance?userInfo.balance:0}}<text class="unit"> 积分</text></view>
				</view>

			</view>
		</view>

		<view class="list" v-if="userInfo&&userInfo.userId">
			<view class="item display-flex" @click="onSend()">
				<view class="name">预约配送</view>
				<image class="arrow" src="/static/icon_arrow_right.png" @click="closePopup" />
			</view>
			<view class="item display-flex" @click="onCard()">
				<view class="name">会员卡</view>
				<image class="arrow" src="/static/icon_arrow_right.png" @click="closePopup" />
			</view>
			<view class="item display-flex" @click="onSendManage()" v-if="userInfo.roleType==='emp'">
				<view class="name">配送</view>
				<image class="arrow" src="/static/icon_arrow_right.png" @click="closePopup" />
			</view>
			<view class="item display-flex" @click="onPerson()">
				<view class="name">设置</view>
				<image class="arrow" src="/static/icon_arrow_right.png" @click="closePopup" />
			</view>
			<view class="item display-flex" @click="onPhone()">
				<view class="name">联系店家</view>
				<view class="info">{{userInfo.shopName}}-{{userInfo.shopPhone}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		onMounted
	} from 'vue'
	import {
		onLoad,
		onShow,
		onReachBottom,
	} from '@dcloudio/uni-app'
	import utils from '/common/util.js'
	const userInfo = ref(getApp().globalData.userInfo)

	const show = ref(false)
	const onPerson = () => {
		uni.navigateTo({
			url: '/pages_other/setting'
		})
	}
	const onCard = () => {
		uni.navigateTo({
			url: '/pages_other/my-card'
		})
	}
	const onSendManage = () => {
		uni.navigateTo({
			url: '/pages_other/sendManage/home'
		})
	}
	const onSend = () => {
		if (!userInfo.value.phone) {
			uni.showToast({
				title: '请先在设置中完善联系人电话',
				icon: 'none'
			})
			return
		}
		if (!userInfo.value.addressDesc) {
			uni.showToast({
				title: '请先在设置中完善送货地址',
				icon: 'none'
			})
			return
		}
		uni.navigateTo({
			url: '/pages_other/send/confirm'
		})
	}
	const getUserInfo = () => {
		getApp().globalData.serviceApi({}, 'getBaseUserInfo', 'POST').then(res => {
			getApp().globalData.userInfo = res.data
			userInfo.value = res.data
			uni.hideLoading()
		})
	}
	const getMyInfo = () => {
		getApp().globalData.serviceApi({}, 'getPhone', 'POST').then(res => {
			userInfo.value.shopPhone = res.data.phone
			userInfo.value.shopName = res.data.name
			uni.hideLoading()
		})
	}

	const onPhone = () => {
		// 判断手机是否支持拨打电话功能
		if (userInfo.value.shopPhone && uni.canIUse('makePhoneCall')) {
			uni.makePhoneCall({
				phoneNumber: userInfo.value.shopPhone, // 电话号码
				success: function() {
					console.log('拨打电话成功');
				},
				fail: function() {
					console.log('拨打电话失败');
				}
			});
		} else {
			console.log('你的设备不支持拨打电话功能');
		}
	}
	onShow(() => {
		console.log('******onMounted', getApp().globalData.userInfo, userInfo)
		console.log('组件已经挂载11')
		userInfo.value = getApp().globalData.userInfo
		uni.showLoading({
			title: '请稍等...',
			mask: true
		})
		getUserInfo()
		getMyInfo()
	})
	onMounted(() => {
		console.log('******onMounted', getApp().globalData.userInfo, userInfo)
		console.log('组件已经挂载')
		uni.showLoading({
			title: '请稍等...',
			mask: true
		})
		getUserInfo()
		getMyInfo()
	})
</script>

<style lang="less" scoped>
	.container {
		position: relative;
		width: 100%;
		min-height: 100%;
		padding: 10rpx;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			z-index: -1;
			// background: url('/static/3001.png') left top / 100% no-repeat;
		}

		.person-box {

			padding: 80rpx 30rpx 76rpx;
			color: #fff;

			.img {
				width: 140rpx;
				height: 140rpx;

			}

			.info-box {
				width: calc(100% - 140rpx - 50rpx);
				padding-left: 30rpx;

				.name {
					font-size: 42rpx;
				}
			}

			.seting {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.card-box {
			width: calc(100% - 60rpx);
			position: relative;
			padding: 46rpx 40rpx;
			margin-left: 30rpx;

			// background: url('/static/3004.png') top left / 100% 100% no-repeat;
			.bg-item {
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				width: 100%;
				height: 100%;
			}

			margin-top: 20rpx;
			color: #fff;

			.name {
				font-size: 32rpx;
			}

			.value {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 46rpx;
				padding-top: 30rpx;
				font-weight: 600;

				.amount {
					margin-right: 50rpx;
				}

				.unit {
					font-size: 30rpx;
					font-weight: normal;
				}
			}
		}

		.list {
			padding: 20rpx 30rpx 0;

			.item {
				height: 90rpx;
				line-height: 90rpx;
				border-bottom: 1px solid #e5e5e5;

				.arrow {
					width: 28rpx;
					height: 28rpx;
				}

				&:last-child {
					border: none
				}
			}
		}
	}
</style>